<!--
 * @Description:链式运动框架
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 10:53:48
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>链式运动框架</title>
	<script src="./move.js"></script>
	<style>
		div {
			width: 100px;
			height: 100px;
			flex: left;
			background: yellow;
			margin: 20px;
			border: 1px solid slateblue;
		}
	</style>
	<script>
		window.onload = function () {
			var odiv = document.getElementById("div1")
			odiv.onmouseover = function () {
				startmove(odiv,'width',200,function(){
					startmove(odiv,'height',300,function(){
						startmove(odiv,'opacity',100,function(){
										console.log("ert")
						})
					})
				})
			}
			odiv.onmouseout = function () {

				startmove(odiv,'opacity',30,function(){
					startmove(odiv,'height',100,function(){
						startmove(odiv,'width', 100,function(){
									console.log("opacity")
						})
					})
				})



				
			}

		}
	</script>
</head>

<body>
	<p>
		1 在多物体运动框架里面<br>
		所以的运动属性都不能公用<br>
		Math.round 四舍五入
	</p>
	<div id="div1">变宽</div>
</body>

</html>